<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/perfect-scrollbar.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <!-- You can change the theme colors from here -->
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.min.css">

</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper">
    <!-- 导航 -->
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="../index.html">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark"href="javascript:void(0)">
                <i class="sl-icon-menu"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark"href="javascript:void(0)">
                <i class="sl-icon-menu"></i>
              </a>
            </li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <!-- 侧边栏 -->
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="20"></c-slider>
        </nav>
      </div>
    </aside>
    <!-- main -->
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">优惠券管理</h3>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
                    <li class="breadcrumb-item active">领取管理</li>
                </ol>
            </div>
        </div>
        <div class="row bgfff p-t-30 p-l-30 p-r-31 p-b-30 m-b-20">
          <el-row style="width: 100%">
            领取列表
          </el-row>
            <el-row style="width: 100%;margin-top: 10px">
                <!--1待使用，2已使用 3 已过期-->
                <el-radio-group v-model="couponState" @change="couponStateChange">
                    <el-radio :label="0">全部</el-radio>
                    <el-radio :label="1">待使用</el-radio>
                    <el-radio :label="2">已使用</el-radio>
                    <el-radio :label="3">已过期</el-radio>
                </el-radio-group>
            </el-row>
          <el-row style="overflow-x:auto;width: 100%;display:block;">
            <el-table border align="center"  highlight-current-row
                    :data="tableData"
                    style="overflow-x:auto;width: 100%;display:block;" >
              <el-table-column align="center" type="index" width="50" label="序号"> </el-table-column>
              <el-table-column align="center" prop="nickName" label="领取用户" > </el-table-column>
              <el-table-column align="center"  prop="name" label="优惠券名称" > </el-table-column>
              <el-table-column align="center" prop="grantModeText" label="发放方式"> </el-table-column>
              <el-table-column align="center"   label="优惠券折扣/金额">
                <template slot-scope="scope">
                    <span v-if="scope.row.couponType == 1">{{scope.row.couponFaceValue}}元</span>
                    <span v-if="scope.row.couponType == 2">{{scope.row.couponDiscount}}折</span>
                  </template>
              </el-table-column>
              <el-table-column align="center" prop="minAmount" label="最低消费金额">   </el-table-column>

              <el-table-column align="center" label="发放日期" >
                <template slot-scope="scope">
                  <span>{{scope.row.grantStartTime }}到{{scope.row.grantEndTime }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center"  label="有效日期" >
                <template slot-scope="scope">
                  <span>{{scope.row.effectiveStartTime }}到{{scope.row.effectiveEndTime }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="receiveTime" label="领取时间" > </el-table-column>

              <el-table-column align="center" prop="pubState" label="状态" >
                <template slot-scope="scope">
                  <span>未使用</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="orderNum" label="订单编号" > </el-table-column>

              <el-table-column align="center" fixed="right" label="操作"  width="170">
                <template slot-scope="scope">
<!--                  <el-link >详情</el-link>-->
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row  style="margin-top:10px;">
            <el-pagination
                           layout="total, sizes, prev, pager, next"
                           :current-page="current"
                           :page-sizes="[10, 20, 50, 100]"
                           :page-size="pageSize"
                           :total="totalCount"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
            />
          </el-row>
          <div class="fs14 p-t-18 p-b-15"></div>
        </div>
      </div>
    </div>
  </div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/perfect-scrollbar.jquery.min.js"></script>
<script src="js/sidebarmenu.js"></script>
<script src="js/custom.min.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/vue.js"></script>
<script src="js/config.js"></script><script src="js/extend.js"></script>
<script>
  $(function () {

    var vw = new Vue({
      el: '#main-wrapper',
      data: {
        couponList: [],
        totalCount : 0,
        pubState:true,
        current: 1 ,
        pageSize:10,
        couponState: 0 ,
        tableData: []
      },
      mounted() {
        this.searchPage();
      },
      methods: {
          searchPage(){
            let param = $.formatParams(location.href);
            const setting = {
              data : {
                pageSize : this.pageSize,
                pageNum : this.pageNum,
                couponState : this.couponState,
                couponId: param.couponId
              }
            }
            $.cAjax('/crmPc/company/coupon/coupponRecords',setting).then(data => {
              console.log(data)
              if(data){
                this.tableData = data.list;
                this.tableData.forEach(item =>{
                  item.grantModeText = item.grantMode == 2 ? "手动领取" : "自动发放";
                })
                this.totalCount = data.total;
              }

            }).catch(function (err) {
            });
          },
          couponStateChange(value){
            this.searchPage();
          },
          handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.searchPage();

          },
          handleCurrentChange(currentPage) {
            this.currentPage = currentPage
            this.searchPage();
          },

          delCoupon(couponId) {
              layer.confirm('确定要删除这个优惠券吗？', {
                  skin: 'confirm-class',
                  btn: ['取消', '确定']
              }, (i => {
                  layer.close(i);
              }), () => {
                  $.cAjax('/crmPc/company/coupon/del', {
                      data: {
                          couponId: couponId,
                      }
                  }).then(res => {
                      layer.msg('删除成功');
                      this.getOrderList();
                  });

                  return false;
              });

          },
      },
        filters: {
            grantMode2str(refundState) {
                let obj = {
                    1: "系统自动发放",
                    2: "用户手动领取",
                    3: "红包发放",
                };
                return obj[refundState];
            },
        }
    })
  })
</script>


  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</body>
</html>

